<template>
  <div class="el-tree-select">
    <el-select style="width: 100%" v-model="valueId" @change="change" :multiple="multiple"
      :collapse-tags="multiple" :placeholder="placeholder">
      <el-option
        v-for="item in list"
        :key="item[objMap.value]"
        :label="item[objMap.label]"
        :value="item[objMap.value]"
        :disabled="item.disabled"
      />
    </el-select>
  </div>
</template>

<script setup>
import request from '@/utils/request'
const { proxy } = getCurrentInstance();

const loading = ref(false);
const datas = ref([]);

const props = defineProps({
  /* 配置项 */
  objMap: {
    type: Object,
    default: () => {
      return {
        value: 'id', // ID字段名
        label: 'label', // 显示名称
      }
    }
  },
  /* 自动收起 */
  accordion: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  
  multiple: {
    type: Boolean,
    default: () => {
      return false
    }
  },

  
  /**当前双向数据绑定的值 */
  value: {
    type: [String, Number, Array],
    default: ''
  },
  /**当前的数据 */
  options: {
    type: Array,
    default: () => []
  },
  /**输入框内部的文字 */
  placeholder: {
    type: String,
    default: ''
  },
  url: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:value']);

const valueId = computed({
  get: () => props.value,
  set: (val) => {
    emit('update:value', val)
  }
});
const list = computed({
  get: () => [...props.options, ...datas.value],
  set: (val) => {}
});
const valueTitle = ref('');
const defaultExpandedKey = ref([]);

const change = () => {
  nextTick(() => {
    emit('change', list.value.find(e => e[props.objMap.value] == valueId.value))
  })
}

function initHandle() {
  nextTick(() => {
    // const selectedValue = valueId.value;
    // if (selectedValue !== null && typeof (selectedValue) !== 'undefined') {
    //   const node = proxy.$refs.selectTree.getNode(selectedValue)
    //   if (node) {
    //     valueTitle.value = node.data[props.objMap.label]
    //     proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
    //     defaultExpandedKey.value = [selectedValue] // 设置默认展开
    //   }
    // } else {
    //   clearHandle()
    // }
  })
}
function handleNodeClick(node) {
  valueTitle.value = node[props.objMap.label]
  valueId.value = node[props.objMap.value];
  defaultExpandedKey.value = [];
  proxy.$refs.treeSelect.blur()
  selectFilterData('')
}
function selectFilterData(val) {
  proxy.$refs.selectTree.filter(val)
}
function filterNode(value, data) {
  if (!value) return true
  return data[props.objMap['label']].indexOf(value) !== -1
}
function clearHandle() {
  valueTitle.value = ''
  valueId.value = ''
  defaultExpandedKey.value = [];
  clearSelected()
}
function clearSelected() {
  const allNode = document.querySelectorAll('#tree-option .el-tree-node')
  allNode.forEach((element) => element.classList.remove('is-current'))
}

onMounted(() => {
  initHandle()
})

watch(valueId, () => {
  initHandle();
})

const onload = () => {
  loading.value = true;
  nextTick(() => {
    if (!props.url) return
    request.get(props.url).then((res) => {
      loading.value = false;
      if (res.code == 200) {
        datas.value = res.result.records || res.result;
      }
    });
  });
}

watch(() => props.url, () => {
  // emit('update:value', '')
  if (props.url) onload();
}, { immediate: true })

</script>

<style lang='scss' scoped>
@import "@/assets/styles/variables.module.scss";

.el-tree-select {
  width: 100%;
}
</style>